<template>
  <div class="box-card-flex">
    <el-input v-model="searchText" :placeholder="placeholder" style="min-width: 270px" @keyup.enter.native="handleEnter">
      <i slot="prefix" class="el-input__icon el-icon-search" />
    </el-input>
    <!-- 隐藏勾选框 -->
    <el-checkbox v-if="showCheck" v-model="checked" style="margin-left: 15px" @change="handleChange">{{ showType }}</el-checkbox>
    <template v-for="(item, index) in filterSortCustom">
      <el-popover v-show="!item.ishow" :key="index" placement="bottom" width="260" class="box-card-list">
        <ul>
          <li v-for="(child, c_index) in item.list" :key="c_index" class="view-flex" @click="handleClickList(item.key, child)">
            <div class="view-text"><i v-if="child.icon" :class="child.icon" class="view-icon" />{{ child.name }}</div>
            <div><i v-if="child.value === valueData[item.key]" class="el-icon-check font16 font-bold" /></div>
          </li>
        </ul>
        <div slot="reference" class="cursor">
          <i :class="filterSortClassFun(item)" />
          {{ filterSortTitleFun(item) }}
        </div>
      </el-popover>
    </template>

    <el-popover width="580" class="box-card-list">
      <el-form ref="filterForm" :model="filterForm" :label-suffix="':'" label-position="left" label-width="90px" class="lineBox">
        <el-row v-for="(item, index) in filter" :key="index">
          <el-col :span="4">
            <span class="filter-title">{{ item.ftitle }}</span>
          </el-col>
          <el-col :span="18" :offset="!item.ftitle ? 4 : 0">
            <FormComponents :item-obj="item" :form="filterForm" :isedit="item.isedit" :disable="item.disable" class="from15" @remoteSelectChange="remoteSelectChange" />
          </el-col>
          <el-col :span="2">
            <div class="filter-clean" @click="handleClean(item, index)">清除</div>
          </el-col>
        </el-row>
      </el-form>
      <div class="clean-flex">
        <span class="cursor" @click="handleClean(false)">
          <i class="ejeticon ejet-icona-zu1420" />
          清空所有条件
        </span>
        <div>
          <el-button type="primary" @click="handleEnter">{{ $t('common.search') }}</el-button>
        </div>
      </div>
      <div slot="reference" class="cursor">
        <i class="ejeticon ejet-icona-zu1421" />
        <span v-if="!!filterNum">{{ filterNum }}</span>
        <span v-else>筛选</span>
      </div>
    </el-popover>
  </div>
</template>
<script>
// import isFunction from 'lodash/isFunction'
import FormComponents from '@/components/FormComponents/index.vue'
export default {
  components: {
    FormComponents
  },
  inject: ['tabFilter'],

  props: {
    // 筛选项列表
    filterList: {
      type: Array,
      default: () => {
        return []
      }
    },
    placeholder: {
      type: String,
      default: ''
    },
    // 筛选中增加按钮
    filterSort: {
      type: Array,
      default: () => {
        return []
      }
    },
    showCheck: {
      type: Boolean,
      default: false
    },
    showType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      searchText: '',
      // 所有值 对象
      valueData: {},
      // 所有值对应的属性 title name等
      valueObj: {},
      // 保证第一次初始化
      firstInit: true,
      // 筛选中表单
      filterForm: {},
      // 筛选中有值得个数
      filterNum: 0,
      filterParam: {},
      filter: [],
      filterCloneCustom: [],
      filterSortCustom: [],
      checked: false,
    }
  },
  watch: {
    filterList: {
      handler(v) {
        this.filter = v
      },
      deep: true,
      immediate: true
    },
    filterSort: {
      handler(v) {
        this.filterCloneCustom = v
        this.initCustom()
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    handleChange(value) {
      this.$emit('hideOrShow', value)
    },
    initCustom() {
      this.filterSortCustom = this.$_.cloneDeep(this.filterCloneCustom).map(m => {
        if (this.firstInit) {
          this.valueData[m.key] = m.value
        }
        if (m.noshow) {
          if (isFunction(m.noshow)) {
            m.ishow = m.noshow(m, this.valueData)
          }
        }
        return m
      })
      if (this.firstInit) {
        this.firstInit = false
      }
    },
    handleClean(obj, index) {
      if (obj) {
        this.filterForm[obj.prop] = undefined
      } else {
        this.filter.map(f => {
          this.filterForm[f.prop] = undefined
        })
        // this.$refs['filterForm'].resetFields()
      }
      this.remoteSelectChange()
    },
    remoteSelectChange(v) {
      this.$nextTick(() => {
        this.returnFilterNum()
        this.doParentFunEmit()
      })
    },
    handleClickList(str, obj) {
      this.valueObj[str] = {
        name: obj.name,
        icon: obj.icon
      }
      this.valueData[str] = obj.value
      if (obj.param) {
        this.filterParam = obj.param
      }
      this.doParentFunEmit()
    },
    // 处理所有过滤筛选数据
    returnSortFilterData() {
      return {
        ...this.valueData,
        filterForm: this.filterForm,
        filterParam: this.filterParam,
        fuzzySearch: this.searchText
      }
    },
    returnFilterNum() {
      var num = 0
      this.filter.map(f => {
        var ary = this.filterForm[f.prop]
        if (Array.isArray(ary) && ary.length > 0) {
          num++
        } else if (typeof ary === 'string' && ary) {
          num++
        } else if (Object.prototype.toString.call(ary) === '[object Object]' && ary) {
          num++
        }
      })
      this.filterNum = num
    },
    // 搜索回车
    handleEnter() {
      this.doParentFunEmit()
    },
    doParentFunEmit() {
      // 调用父级方法
      this.tabFilter.changeFilter(this.returnSortFilterData())
      this.initCustom()
    },
    filterSortClassFun(item) {
      var icon = item.icon
      if (this.valueObj[item.key]) {
        return this.valueObj[item.key].icon || icon
      }
      return icon
    },
    filterSortTitleFun(item) {
      var title = item.title
      if (this.valueObj[item.key]) {
        return this.valueObj[item.key].name || title
      }
      return title
    }
  }
}
</script>
<style lang="scss" scoped>
.box-card-flex {
  display: flex;
}
.box-card-list {
  min-width: 60px;
  flex: 0 0 auto;
  padding-left: 30px;
  text-align: center;
}

.view-flex {
  display: flex;
  height: 35px;
  line-height: 35px;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  .view-text {
    font-size: 14px;
  }
  .view-icon {
    margin-right: 10px;
  }
}
.lineBox {
  padding: 18px 10px;
}
.filter-title {
  color: #cccccc;
  line-height: 36px;
}
.filter-clean {
  line-height: 36px;
  text-align: center;
  cursor: pointer;
}
.clean-flex {
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  line-height: 35px;
}
</style>
